Skip to content

Command Palette: Add "Design" and "Styles" command for classic theme #69873

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Open
Infinite-Null wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

Command Palette: Add "Design" and "Styles" command for classic theme #69873

Infinite-Null wants to merge 3 commits into from
+64 −29

Conversation

@Infinite-Null
Copy link
Contributor

@Infinite-Null Infinite-Null commented Apr 10, 2025 •
edited
Loading

What?

This PR addresses issue by adding navigation commands for classic themes
Closes: #69854

Why?

Currently, block themes have commands to access the Site Editor and Styles, but classic themes that support StyleBook lack equivalent navigation options.

How?

The implementation adds StyleBook navigation support for classic themes with the following approach:

  1. Added detection for themes that support editor styles using isSupportEditorStyles flag
  2. Modified navigation command logic to show appropriate options based on theme capabilities:
    • For block themes: Maintained existing command and all site editor navigation commands
    • For classic themes with editor styles: Added "Open Design" command and "Stylebook" navigation option
    • For themes without editor styles support: No site editor commands shown

Screenshots or screencast

Screen.Recording.2025-04-11.at.10.52.55.AM.mov
Screen.Recording.2025-04-11.at.10.53.43.AM.mov

@Infinite-Null Infinite-Null marked this pull request as ready for review April 11, 2025 06:34
@github-actions
Copy link

github-actions bot commented Apr 11, 2025 •
edited
Loading

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: Infinite-Null <[email protected]>
Co-authored-by: yogeshbhutkar <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: t-hamano <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

yogeshbhutkar
yogeshbhutkar reviewed Apr 11, 2025
View reviewed changes
packages/core-commands/src/site-editor-navigation-commands.js
}
}

result.push( {
Copy link
Contributor

@yogeshbhutkar yogeshbhutkar Apr 11, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nit: I believe, there's a minor scope for refactoring this useMemo implementation. We can push patterns to results immediately after its declaration and bail out early if ! canCreateTemplate is true. This should remove one layer of nesting and improve overall readability.

Copy link
Contributor Author

@Infinite-Null Infinite-Null Apr 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hey @yogeshbhutkar,
Thank you for the suggestion! I’ve simplified the code and applied early return logic to improve clarity.

@carolinan
Copy link
Contributor

carolinan commented Apr 12, 2025 •
edited
Loading

Hi
Support for editor styles is not the only condition for displaying the stylebook.
It also shows if a classic theme includes a theme.json file.
(Classic themes that include theme.json does not set the isBlockTheme check to true because do they not include templates/index).

@carolinan carolinan mentioned this pull request Apr 12, 2025
Open
@Infinite-Null
Copy link
Contributor Author

Infinite-Null commented Apr 14, 2025

Hi Support for editor styles is not the only condition for displaying the stylebook. It also shows if a classic theme includes a theme.json file. (Classic themes that include theme.json does not set the isBlockTheme check to true because do they not include templates/index).

Hi @carolinan,
Thank you for the clarification! I’ll wait for PR #69857 to move forward with this one accordingly.

@t-hamano
Copy link
Contributor

t-hamano commented Apr 14, 2025

I think it's fine to go ahead with either this PR or #69857.

If you want to move this PR forward, use this check:

gutenberg/packages/edit-site/src/components/site-hub/index.js

Lines 138 to 139 in 0674eab

// This is a temp solution until the has_theme_json value is available for the current theme.
const hasThemeJson = settings.supportsLayout;

@Infinite-Null
Copy link
Contributor Author

Infinite-Null commented Apr 14, 2025

I think it's fine to go ahead with either this PR or #69857.

If you want to move this PR forward, use this check:

gutenberg/packages/edit-site/src/components/site-hub/index.js

Lines 138 to 139 in 0674eab

// This is a temp solution until the has_theme_json value is available for the current theme.
const hasThemeJson = settings.supportsLayout;

Hi @t-hamano,

When I try to import editSiteStore to use it I get:

code:

import { store as editSiteStore } from '@wordpress/edit-site';

image

Do you think I should use a relative path to access the store?

Something like:

import { store as editSiteStore } from '../../edit-site/src/store';

I want to access getSettings() from this store to check for hasThemeJson. Is there some other way to use this store that avoids the restricted import error?

@t-hamano
Copy link
Contributor

t-hamano commented Apr 14, 2025

When I try to import editSiteStore to use it I get:

code:

import { store as editSiteStore } from '@wordpress/edit-site';

Sorry, I was wrong. This store does not exist outside of the site editor. We need to move #69857 forward first.

import { store as editSiteStore } from '../../edit-site/src/store';

This approach is not recommended.

@t-hamano t-hamano added [Type] Enhancement A suggestion for improvement. [Package] Editor /packages/editor [Package] Core commands labels Apr 14, 2025
@Infinite-Null
Copy link
Contributor Author

Infinite-Null commented Apr 15, 2025

Sure @t-hamano,
I will wait for #69857 and move this PR forward accordingly

@t-hamano
Copy link
Contributor

t-hamano commented Sep 5, 2025

Update: The menu commands are now automatically registered based on the Menu API (See #71476).

As a result, we don't need to add the "Design" command in this PR.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@yogeshbhutkar yogeshbhutkar Awaiting requested review from yogeshbhutkar

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

[Package] Core commands [Package] Editor /packages/editor [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Command Palette: Add "Design" and "Styles" command for classic theme

4 participants

@Infinite-Null @carolinan @t-hamano @yogeshbhutkar